<template>
  <div class="welcome-container">
    <!-- 系统标题 -->
    <h1 class="system-title">图书管理系统</h1>
    
    <!-- 白色选择框 -->
    <div class="identity-box">
      <p class="title">请选择您的身份</p>
      <div class="button-group">
        <button class="identity-btn" @click="handleClick(1)">教师 >></button>
        <button class="identity-btn" @click="handleClick(3)">学生 >></button>
        <button class="identity-btn" @click="handleClick(0)">管理员 >></button>
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "~/router";
// 8.讲解
const handleClick = (type) => {
  router.push({ path: `/login/${type}` });
}
</script>

<style scoped>
/* 页面容器：背景图 + 整体布局 */
.welcome-container {
  /* 图书背景图，替换成你的实际路径 */
  background: url('https://picsum.photos/id/24/1920/1080') center/cover no-repeat; 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* 系统标题样式 */
.system-title {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 2rem;
  text-shadow: 0 0 8px rgba(0,0,0,0.5);
}

/* 白色选择框：居中、圆角、阴影 */
.identity-box {
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 2rem 3rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  width: 320px;
  text-align: center; 
  /* 让内部元素默认居中，也可以用 flex 更灵活 */
}

/* 选择框标题 */
.title {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 1.5rem;
}

/* 按钮组：用 flex 让按钮垂直排列 + 水平居中 */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 1rem; 
  /* 按钮之间的间距 */
  align-items: center; 
  /* 按钮组内水平居中 */
}

/* 身份按钮样式 */
.identity-btn {
  width: 100%;
  max-width: 180px; 
  /* 限制按钮最大宽度，避免太宽 */
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background-color: #7c7668;
  color: #fff;
  transition: all 0.3s ease;
}

.identity-btn:hover {
  opacity: 0.9;
  transform: scale(1.03);
}
</style>